<template>
	<view class="body">
		<cu-custom bgImage="" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">头条新闻</block>
		</cu-custom>
		<view class="box">
			<unicloud-db  v-slot:default="{ data, loading, error, options }"  orderby='zhihu_id desc'  collection="zhihu-daily-articles">
				<view v-if="error">{{ error.message }}</view>
				<view v-else>
					<view class="item-list" v-for="(item, i) in data" :key="i">
						<view class="item" @click="lookDetail(item.url)">
							<view class="item-picture-date">{{ item.ctime }}</view>
							<view class="item-title">{{ item.title }}</view>

							<image class="item-picture-img" :src="item.picUrl" mode="widthFix"></image>

							<view class="picture-author">来源 | {{ item.source }}</view>
							<view class="picture-content">{{ item.description }}</view>
						</view>
					</view>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		getdata() {
			uniCloud
				.callFunction({
					name: 'get_headlineNews',
					data:{
						type:1
					}
				})
				.then(res => {
					console.log(res);
				});
		},
		lookDetail(url) {
			uni.navigateTo({
				url: '../webview/webview?url=' + url
			});
		}
	},
	onLoad() {
		let user = uni.getStorageInfoSync('user');
		console.log();
		this.getdata()
	}
};
</script>

<style lang="scss">
.body {
	.box {
		background: #f6f6f6;
		background-attachment: fixed;
		z-index: -100;
		background-image: none !important;
		min-height: 100vh;
		overflow-y: hidden;
		.item-list {
			background: #f6f6f6;
			overflow: hidden;
			view {
				margin: 0 40rpx;
			}

			.item {
				background: #ffffff;
				margin: 0 0 20rpx 0;
				box-shadow: 0 10rpx 0 #eeeeee;
				margin-bottom: 80rpx;

				.item-picture-date {
					color: #000000;
					opacity: 0.6;
					font-size: 40rpx;
					line-height: 44rpx;
					text-align: center;
					padding-top: 32rpx;
					font-family: 'Courier New' !important;
				}
				.item-title {
					color: #000000;
					opacity: 0.6;
					font-size: 42rpx;
					text-align: center;
					margin-top: 20rpx;
					margin-bottom: 16rpx;
				}
				.item-picture-img {
					width: 100%;
					margin-top: 10px;
				}

				.picture-author {
					color: #808080;
					font-size: 20rpx;
					line-height: 28rpx;
					text-align: center;
					margin-top: 10rpx;
				}
				.picture-content {
					color: #000000;
					opacity: 0.6;
					font-size: 14px;
					line-height: 26px;
					margin-top: 20rpx;
					padding-bottom: 36rpx;
				}
			}
		}
	}
}
</style>
